<template>
	<div style="position:relative;">
		<div id="courseCoverContainer" style="position: absolute; width: 100%; height: 236px; overflow: hidden;">
			<div id="courseImg" 
			style="height: 236px; " :style="{'background-image': bgUrl}">
			</div> 
			<div id="courseImgCover" class="courseImgCover" style="height: 236px;"></div>
		</div>
		<el-row>
		  <el-col :span="4">1</el-col>
		  <el-col :span="16">
			  <div style="color:white;height:236px;display:flex;flex-direction:column;justify-content:space-around;">
				  <div>
					  <el-breadcrumb separator="/">
					    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					    <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
					    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
					    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
					  </el-breadcrumb>
				  </div>
				  
				  <div>
					  202505软通咨询华为项目信息安全学习
				  </div>
				  
				  <div>
					  <div class="course-study-btn"> 开始学习 </div>
				  </div>
				  <div class="box-font-16" style="display:flex;">
					  <span><span class="box-font-16">长期有效</span></span> 
					  <div class="circle-divider"></div> 
					  <span class="box-font-16"> 1 </span> 
					  <span class="box-font-16">人在学</span> 
					  <div class="circle-divider"></div> 
					  <span class="box-font-16">29</span> 
					  <span class="box-font-16">个计划</span> 
					  <div class="circle-divider"></div> 
					  <span class="box-font-16">时长</span> 
					  <span class="box-font-16">19小时13分</span>
				  </div>
			  </div>
			  <div>
				  选项卡
				  <el-row>
				    <el-col :span="20">
						 <el-tabs v-model="activeName" @tab-click="handleClick">
						    <el-tab-pane label="课程介绍" name="first">202505软通咨询华为项目信息安全学习</el-tab-pane>
						    <el-tab-pane label="课程目录" name="second">课程目录</el-tab-pane>
						    <el-tab-pane label="课程资料" name="third">课程资料</el-tab-pane>
						    <el-tab-pane label="课程笔记" name="fourth">课程笔记</el-tab-pane>
						  </el-tabs>
					</el-col>
				    <el-col :span="4"></el-col>
				    
				  </el-row>
			  </div>
		  </el-col>
		  <el-col :span="4">
			  
		  </el-col>
		</el-row>
	</div>
</template>

<script>
	import {doLogin} from '../api/login.js'
	export default {
	    data() {
	      return {
	        form: {
	          name: '',
	          password: ''
	        },
			activeName:"first",
		
			//  url('httpsdf')
			bgUrl:"url('"+require('../assets/a1.png')+"')"
	      }
	    },
	    methods: {
	     
	    }
	  }
</script>

<style>
	 .course-study-btn {
	    background-color: hsla(0, 0%, 100%, .3);
	    border-radius: 41px;
	    box-shadow: 3px 3px 20px rgba(0, 0, 0, .05);
	    box-sizing: border-box;
	    cursor: pointer;
	    display: inline-block;
	    font-size: 20px;
	    font-weight: 500;
	    line-height: 1.8;
	    margin: 0;
	    outline: 0;
	    padding: 12px 20px;
	    text-align: center;
	    white-space: nowrap;
	    width: 230px;
		}
		
		 .circle-divider {
		    background: #fff;
		    border-radius: 50%;
		    display: inline-block;
		    height: 4px;
		    margin-bottom: 3px;
		    margin-left: 6px;
		    margin-right: 6px;
		    width: 4px;
		}
		
		.box-font-16 {
		    font-size: 16px;
		}
		
		#courseImg {
		    background-position: 50%;
		    background-repeat: no-repeat;
		    background-size: 100%;
		    -webkit-filter: blur(10px);
		    -ms-filter: blur(10px);
		    filter: blur(10px)
		}
		
		#courseImgCover {
		   /* background: -webkit-linear-gradient(left,rgba(2,2,2,.9),rgba(2,2,2,.4),rgba(2,2,2,.3));
		    background: -moz-linear-gradient(left,rgba(2,2,2,.9),rgba(2,2,2,.4),rgba(2,2,2,.3));
		    background: -o-linear-gradient(left,rgba(2,2,2,.9),rgba(2,2,2,.4),rgba(2,2,2,.3)); */
			background: -webkit-linear-gradient(left, rgba(2, 2, 2, .9), rgba(2, 2, 2, .4), rgba(2, 2, 2, .3));
		    left: 0;
		    position: absolute;
		    top: 0;
		    width: 100%
		}
		
		element.style{
			display:flex;
			justify-content:
		}

</style>